querySelectorAll使用中极易出现的问题，什么是静态NodeList? |
您所在的位置：网站首页 › nodelist addEventListener › querySelectorAll使用中极易出现的问题，什么是静态NodeList? |
querySelectorAll使用中极易出现的问题，什么是静态NodeList?
|
最近重新复习了一下js的基础部分，跟着视频学习整理了一下 js中获取元素的方法有以下几种 获取元素 querySelector 返回节点 querySelectorAll 返回 NodeList ，注意，这里的NodeList是静态的，不会随着页面内容的改变而改变 getElementById 返回节点 getElementsByClassName 返回 HTMLCollection getElementsByTagName 通过标签名称获取如 返回 HTMLCollection getElementsByName 通过name属性来获取 返回 NodeList document.body 获取body 元素 document.documentElement 获取html元素于是产生了疑问：什么是静态NodeList?静态究竟体现在哪儿 于是写代码验证了一下 html部分 1 2 3 4 + 1 lijs部分 addLiBtn = document.querySelector('#addLiBtn') my_ul = document.querySelector('#my-ul') //通过querySelector ClassName TagName Name四种方式来获取同样的元素 allLiByQuery = document.querySelectorAll('.my-li') allLiByClass = document.getElementsByClassName('my-li') allLiByTag = my_ul.getElementsByTagName('li') allLiByName = document.getElementsByName('liname') //每次点击都会添加一个新的元素到ul中，并且输出四种方式获取的内容 addLiBtn.addEventListener('click',()=>{ my_ul.innerHTML += '#' console.log(allLiByQuery); console.log(allLiByClass); console.log(allLiByTag); console.log(allLiByName); })简单说明一下，就是我们在页面中放置了几个li标签，和一个button按钮，给按钮添加点击事件，每次点击都会添加一个新的li元素到ul中，并且每次点击都会输出 通过四种方式来获取的元素 结果如下 明明获取的都是同样的元素，唯独querySelectorAll拿到的却是不变的 再次修改代码，在上面点击事件的基础上添加两行，这次我们在点击按钮，添加完元素后，再次使用querySelectorAll来获取页面中的元素 //每次点击都会添加一个新的元素到ul中，并且输出四种方式获取的内容 addLiBtn.addEventListener('click',()=>{ my_ul.innerHTML += '#' console.log(allLiByQuery); console.log(allLiByClass); console.log(allLiByTag); console.log(allLiByName); //再次使用querySelectorAll来获取页面中的元素 allLiByQuery = document.querySelectorAll('.my-li') console.log(allLiByQuery); })结果如下 可以看到，这次querySelectorAll就能拿到 修改页面后 新增的元素了 总结一下，querySelectorAll能够获取的是 在执行这一行代码之前allLiByQuery = document.querySelectorAll('.my-li')页面中存在的元素，获取到元素之后，无论页面怎么改变，获取的元素结果都不会发生变化，除非是在修改页面后，再次使用querySelectorAll来获取存在的元素。 querySelectorAll不同于其他的几种获取元素的方式，他们获取的元素是 动态的 能够随着页面的改变而发生改变 |
【本文地址】